<template>
  <div>
    <van-tabbar v-model="active" @change="tabchange" active-color="#ff5f16">
  <van-tabbar-item icon="video-o">电影</van-tabbar-item>
  <van-tabbar-item icon="search">影院</van-tabbar-item>
  <van-tabbar-item icon="other-pay">资讯</van-tabbar-item>
  <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
</van-tabbar>
<router-view/>
  </div>
  
</template>

<script>
// @ is an alias to /src


export default {
  name: 'HomeView',
  data(){
       return{
        active:0,
        arr:[]
       }
  },
  mounted(){
    const name = this.$route.name
    switch(name){
      case 'movie':
        //如果路由为是movie那么active等于0那么对应的高亮显示
        this.active = 0;
        break;
      case 'cinema':
        //如果路由为是cinema那么active等于1那么对应的高亮显示
        this.active = 1
        break;
      case 'news':
        //如果路由为是news那么active等于2那么对应的高亮显示
        this.active = 2;
        break;
      case 'my':
        //如果路由为是my那么active等于3那么对应的高亮显示
        this.active = 3;
        break;
      default:
        this.active=0;
    }

  },
  
  methods:{
      //点击事件
     tabchange(active){
      // console.log(active)
      //判断进行对应的跳转
      if(active==0){
        //如果active等于0的时候就跳转到movie这个路由去
        this.$router.replace({name:'movie'})
      }else if(active==1){
         //如果active等于1的时候就跳转到cinema这个路由去
        this.$router.replace({name:'cinema'})
      }else if(active==2){
        //如果active等于2的时候就跳转到news这个路由去
        this.$router.replace({name:'news'})
      }else if(active==3){
        //如果active等于3的时候就跳转到news这个路由去
        this.$router.replace({name:'my'})
      }
    }

   
   
  },
 
}

</script>
<style>


</style>

